<template>
  <div class="login-page">
    <!--
      修改组件样式:
      1. 给它加类名, 这个类名会自动添加到组件的根元素上
      2. 所有的组件都会严格按照规范, 有一个自带的类名: 组件名
     -->
    <el-card>
      <!-- 具名插槽: header -->
      <template #header>
        黑马面经运营后台
      </template>
      <!--
         表单校验三要素:
        1. el-form: 必须要有 model 属性和 rules 属性
          - model: 表示当前表单绑定的数据对象
          - rules: 规则, 校验规则
        2. el-form-item: 必须要有 prop 属性来指定校验规则
        3. el-input: 必须使用 v-model 绑定数据
       -->
      <el-form ref="form" :model="form" :rules = "rules">
        <el-form-item label="用户名:" prop="username">
          <el-input placeholder="请输入用户名" v-model="form.username"></el-input>
        </el-form-item>

        <el-form-item label="密码:"  prop="password">
          <el-input placeholder="请输入密码" v-model="form.password"></el-input>
        </el-form-item>

        <el-form-item class="tc">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'LoginIndex',
  data () {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        // username 是 prop 指定的名字，一般建议 数据 prop 规则，三者保持一致
        // required:必填项
        // message:提示信息
        // trigger:什么时候校验，blur:失去焦点时校验
        // pattern:表示正则校验
        username: [
          { required: true, message: '请输入用户名', trigger: ['blur', 'change'] },
          { pattern: /^\w{5,10}$/, message: '长度在 5 到 10 个字符', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: ['blur', 'change'] },
          { pattern: /^\w{5,10}$/, message: '长度在 5 到 10 个字符', trigger: ['blur', 'change'] }
        ]
      }

    }
  },
  methods: {
    // 兜底校验, 校验整个表单是否通过验证, 通过验证才允许发请求
    // 在发送请求登录前, 对表单进行一个预校验
    // ref 可以获取 DOM 元素也可以获取组件对象, validate 是 el-form 组件提供的校验方法
    login () {
      this.$refs.form.validate(async valid => {
        console.log(valid)
        if (!valid) return
        // dispatch 触发 actions 的执行，由于 actions 是异步任务，所以无法立即执行
        // 所以一定要 async await ， 或者 .then
        await this.$store.dispatch('user/loginAction', this.form)
        // console.log('我要登录')
        this.$router.push('/')
        this.$message.success('登陆成功')
      })
    },
    reset () {
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
// scoped 只能给当前组件内的所有标签添加 data-v-hash
// 但是, el-card 里面的元素没有被添加这个唯一标识, 所以直接设置样式无法生效
// 解决方案: 深度作用选择器
// less: 在选择器前面添加 /deep/
// scss: 在选择器前面添加 ::v-deep
.login-page {
  min-height: 100vh;
  background: url(@/assets/login-bg.svg) no-repeat center / cover;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .el-card {
    width: 420px;
    ::v-deep .el-card__header{
      height: 80px;
      background: rgba(114,124,245,1);
      text-align: center;
      line-height: 40px;
      color: #fff;
      font-size: 18px;
    }
  }
  .el-form {
    padding: 0 20px;
  }
  .tc {
    text-align: center;
  }
}
// .el-card {
//   width: 420px;
// }
</style>
